<template>
  <a-card>
    <template #extra>
      <a-space>
        <a-button :icon="loading ? 'loading' : 'reload'" @click="fetchData()">
        </a-button>
      </a-space>
    </template>

    <a-table size="small" :columns="columns" :data-source="data" :pagination="false" :row-key="record => record.id" :loading="loading">
      <div slot="supplierHotelId" slot-scope="text, record">
        <a @click="openSupplierHotel(record.supplier,record.supplierHotelId)">{{ record.supplierHotelId }}</a>
        <br v-if="record.supplierHotelId1 && record.supplierHotelId1.length > 0" /> {{record.supplierHotelId1}}
      </div>
      <div slot="hotelNameEn" slot-scope="text, record">
        {{ record.hotelNameEn }} <br /> {{ record.hotelNameCn }}
      </div>
      <div slot="hotelAddressEn" slot-scope="text, record">
        {{ record.hotelAddressEn }} <br /> {{ record.hotelAddressCn }}
      </div>

      <template slot="available" slot-scope="text">
        {{text?'Yes':'No'}}
      </template>

      <template slot="action" slot-scope="text, record">
          <a-popconfirm :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No" @confirm="cancelMap(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button>{{$t("cancel")}}{{$t("mapping")}}</a-button>
          </a-popconfirm>
      </template>

      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>

  </a-card>
</template>

<script>
import {getMappingList, cancelMapping} from '@/services/mapping'

export default {
  name: "SupplierHotel",
  props: ['HotelId'],
  i18n: require('../i18n'),
  data() {
    return {
      data: [],
      columns: [
        {
          dataIndex: 'supplier',
          align: 'center',
          slotName: "supplier",
          slots: { title: 'supplier' },
        },
        {
          dataIndex: 'supplierHotelId',
          align: 'center',
          slotName: "supplier_hotel_id",
          slots: { title: 'supplier_hotel_id' },
          scopedSlots: { customRender: 'supplierHotelId' },
        },
        {
          dataIndex: 'hotelNameEn',
          align: 'left',
          slotName: "hotel_name",
          slots: { title: 'hotel_name' },
          scopedSlots: { customRender: 'hotelNameEn' },
        },
        {
          dataIndex: 'countryName',
          align: 'left',
          slotName: "country",
          slots: { title: 'country' },
        },
        {
          dataIndex: 'cityName',
          align: 'left',
          slotName: "city",
          slots: { title: 'city' },
        },
        {
          dataIndex: 'hotelAddressEn',
          align: 'left',
          slotName: "address",
          slots: { title: 'address' },
          scopedSlots: { customRender: 'hotelAddressEn' },
        },
        {
          dataIndex: 'supplierTop',
          align: 'center',
          slotName: "sale_top",
          slots: { title: 'sale_top' },
        },
        {
          dataIndex: 'isAvail',
          align: 'center',
          slotName: "available",
          slots: { title: 'available' },
          scopedSlots: { customRender: 'available' },
        },
        {
          align:'center',
          scopedSlots: { customRender: 'action' },
          slotName: "operation",
          slots: { title: 'operation' },
          width: '10%',
        }
      ],
      loading: false,
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      getMappingList(this.$props.HotelId).then(res => {
        this.data = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    cancelMap(record){
      cancelMapping({
        hotelId: record.hotelId,
        supplier: record.supplier,
        supplierHotelId: record.supplierHotelId,
      }).then(res => {
        console.log(res)
        this.fetchData()
      }).catch(error => {
        console.log(error)
      })
    },
    openSupplierHotel(supplier, supplierHotelId){
      this.$openPage('/supplier/hotel/' + supplier + '/' + supplierHotelId, "[" + supplier + "][" + supplierHotelId + "]")
    },
  },
  created() {
    this.fetchData()
  },
}
</script>